<template>
	<view class="container-bill">
		<header>
			<view class='bill-nav' @click="$goPath(1)">
				<image src="/static/images/right-white.png" mode='aspectFit|aspectFill|widthFix' alt="" />
				<view>{{ titile }}</view>
			</view>

			<view class='bill-tabs'>
				<view :class="[tabIndex == item.id ? 'tabs-item tabs-item-active' : 'tabs-item']" v-for="(item, index) in tabs"
					:key="index" @click="switchTabs(item.id)">
					{{ item.title }}
				</view>
			</view>

			<view class="bill-picker" v-if="tabIndex == 2">
				<uni-datetime-picker v-model="timeValue" type="daterange" @change="handleChange" />
			</view>

		</header>

		<section :style="{ marginTop: tabIndex == 2 ? '80rpx' : '' }" class="sectPadTop">
			<view class="sect-box" v-if="list.length > 0">
				<view class='bills-item' v-for="(item, index) in list" :key="index">
					<view>
						<view class='consume-type'>{{ item.remark }}</view>
						<view class='consume-time'>{{ item.createTime }}</view>
					</view>
					<view class='green' v-if="item.type == 'add'">+{{ item.num }}</view>
					<view class='red' v-else>{{ item.num }}</view>
				</view>
			</view>

			<view class="bill-empty" v-else>
				<image
					src="https://youpindou.com:8083/doudougou/image/showImg?imgUrl=/home/ddg_test/images/3b838297-ad51-4cab-b31d-0b9f568f7a6d.png"
					mode="aspectFit|aspectFill|widthFix"></image>
				<view>这里暂时什么都没有哦</view>
			</view>
		</section>
	</view>
</template>
<script>
	import {
		getUserInfo
	} from '@/common/auth';

	export default {
		data() {
			return {
				billsType: '',
				titile: '账单',
				tabIndex: 0,
				list: [],
				total: 0,
				pageCurrent: 1,
				timeValue: [],
				tabs: [{
						title: '三天',
						id: 0
					},
					{
						title: '七天',
						id: 1
					},
					{
						title: '其它',
						id: 2
					},
				],
				timeEnd: '',
				timeStart: '',
			}
		},
		onLoad(options) {
			const {
				billsType
			} = options;
			this.billsType = billsType;
			if (billsType == 'ddk') {
				this.getDdkBills();
				this.titile = '兜兜卡账单';
			} else if (billsType == 'recharge') {
				this.titile = '充值记录';
				this.getBalanceBills(2);
			} else if (billsType == 'withdrawal') {
				this.titile = '提现记录';
				this.getBalanceBills(1);
			} else {
				this.titile = '余额账单';
				this.getBalanceBills(0);
			}
		},
		methods: {
			getBeforeDate(n) {
				var n = n;
				var d = new Date();
				var year = d.getFullYear();
				var mon = d.getMonth() + 1;
				var day = d.getDate();
				if (day <= n) {
					if (mon > 1) {
						mon = mon - 1;
					} else {
						year = year - 1;
						mon = 12;
					}
				}
				d.setDate(d.getDate() - n);
				year = d.getFullYear();
				mon = d.getMonth() + 1;
				day = d.getDate();
				return year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
			},
			//tab切换
			switchTabs(id) {
				console.log(id)
				const {
					billsType
				} = this;
				this.tabIndex = id;
				this.pageCurrent = 1;
				if (id == 2) {
					return;
				}
				if (billsType == 'ddk') {
					this.getDdkBills();
				} else if (billsType == 'recharge') {
					this.getBalanceBills(2);
				} else if (billsType == 'withdrawal') {
					this.getBalanceBills(1);
				} else {
					this.getBalanceBills(0);
				}
			},

			//选择日期
			handleChange(e) {
				const {
					billsType
				} = this;
				if (e.length > 0) {
					this.timeStart = e[0] + ' 00:00:00'
					this.timeEnd = e[1] + ' 23:59:00'
				} else {
					this.timeStart = ''
					this.timeEnd = ''
				}

				if (billsType == 'ddk') {
					this.getDdkBills();
				} else if (billsType == 'recharge') {
					this.getBalanceBills(2);
				} else if (billsType == 'withdrawal') {
					this.getBalanceBills(1);
				} else {
					this.getBalanceBills(0);
				}
			},

			//兜兜卡账单
			getDdkBills() {
				const {
					tabIndex,
					pageCurrent,
					timeValue,
					list
				} = this;
				let userInfo = getUserInfo();
				const param = {
					page: {
						current: pageCurrent,
						size: 20
					},
					query: {
						userId: userInfo.userId
					}
				}
				if (tabIndex != 2) {
					if (tabIndex == 0) {
						param.query.start = this.getBeforeDate(3) + ' 00:00:00';
						param.query.end = this.getBeforeDate(0) + ' 23:59:00';
					} else if (tabIndex == 1) {
						param.query.start = this.getBeforeDate(7) + ' 00:00:00';
						param.query.end = this.getBeforeDate(0) + ' 23:59:00';
					}
				} else {
					if (tabIndex == 2 && timeValue.length == 0) return this.$toast('请选择时间!')
					param.query.start = this.timeStart;
					param.query.end = this.timeEnd;
				}
				uni.showLoading({
					title: '加载中...'
				});
				this.$request.cardFindByPage(param).then(res => {
					uni.hideLoading()
					if (res.code == 200 && res.isSuccess) {
						const {
							records,
							total
						} = res.data;
						if (records.length > 0) {
							if (pageCurrent > 1) {
								let newList = list.concat(records)
								newList.map(item => {
									item.num = (item.remark == '赠送' || item.remark == '购物' || item.remark == '回收') ?
										`-${item.counts}张` : `${item.counts}张`;
									item.type = item.remark == '赠送' || item.remark == '购物' || item.remark == '回收' ? 'minus' : 'add'
								});
								this.list = newList;
							} else {
								records.map(item => {
									item.num = (item.remark == '赠送' || item.remark == '购物' || item.remark == '回收') ?
										`-${item.counts}张` : `${item.counts}张`;
									item.type = item.remark == '赠送' || item.remark == '购物' || item.remark == '回收' ? 'minus' : 'add'
								});
								this.list = records;
							}
						}
						if (pageCurrent == 1 && records.length == 0) {
							this.list = [];
						};
						this.total = total;
					}
				});
			},

			//余额账单
			getBalanceBills(type) {
				const {
					tabIndex,
					pageCurrent,
					timeValue,
					list
				} = this;
				let userInfo = getUserInfo();
				const param = {
					page: {
						current: pageCurrent,
						size: 20
					},
					query: {
						userId: userInfo.userId,
						type
					}
				}

				if (tabIndex != 2) {
					if (tabIndex == 0) {
						param.query.startTime = this.getBeforeDate(3) + ' 00:00:00';
						param.query.endTime = this.getBeforeDate(0) + ' 23:59:00';
					} else if (tabIndex == 1) {
						param.query.startTime = this.getBeforeDate(7) + ' 00:00:00';
						param.query.endTime = this.getBeforeDate(0) + ' 23:59:00';
					}
				} else {
					if (tabIndex == 2 && timeValue.length == 0) return this.$toast('请选择时间!')
					param.query.startTime = this.timeStart;
					param.query.endTime = this.timeEnd;
				}
				uni.showLoading({
					title: '加载中...'
				});
				this.$request.userBalanceFlowingFindByPage(param).then(res => {
					uni.hideLoading();
					if (res.code == 200 && res.isSuccess) {
						const {
							records,
							total
						} = res.data;

						if (records.length > 0) {
							if (pageCurrent > 1) {
								let newList = list.concat(records)
								newList.map(item => {
									item.num = item.amount;
									item.type = Math.sign(item.amount) == -1 ? 'minus' : 'add'
								});
								this.list = newList;
							} else {
								records.map(item => {
									item.num = item.amount;
									item.type = Math.sign(item.amount) == -1 ? 'minus' : 'add'
								});
								this.list = records;
							}
						}
						if (pageCurrent == 1 && records.length == 0) {
							this.list = [];
						}
						this.total = total;
					}
				});
			}


		}
	}
</script>
<style scoped lang="scss">
	.container-bill {
		width: 100%;
		min-height: 100vh;
		font-size: 28rpx;
		font-family: 'PingFang SC-Medium';
		background-color: #FED14E;
		display: flex;
		flex-direction: column;

		header {
			width: 100%;
			padding: 24rpx;
			padding-top: 100rpx;
			border-radius: 0 0 40rpx 40rpx;
			box-sizing: border-box;
			color: #fff;
			background-color: #32B499;
			background-image: url('https://youpindou.com/miniProgram/image/showImg?imgUrl=/home/ypd/images/homeTopIcon.png');
			background-size: 100% auto;
			background-repeat: no-repeat;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 100;

			.bill-nav {
				display: flex;
				align-items: center;
				font-size: 36rpx;
				font-family: 'PingFang SC-Bold';
				margin-bottom: 24rpx;

				image {
					width: 16rpx;
					height: 28rpx;
					display: block;
					margin-right: 12rpx;
				}
			}

			image {
				width: 16rpx;
				height: 32rpx;
				display: block;
				margin-right: 6rpx;
			}

			.bill-tabs {
				background-color: #F6F6F6;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-radius: 32rpx;

				.tabs-item {
					width: 240rpx;
					height: 60rpx;
					font-size: 28rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 500;
					color: #333;
				}

				.tabs-item-active {
					background: #32B499;
					border-radius: 32rpx;
					color: #FFFFFF !important;
					box-shadow: 0 0 4rpx 2rpx rgba(0, 0, 0, 0.12);
				}

			}

			.bill-picker {
				width: 90%;
				margin: 24rpx auto;
				background-color: #fff;
				border-radius: 15rpx;
			}

		}
	}





	section {
		overflow: auto;
		padding: 0 24rpx;
		padding-top: 280rpx;
		box-sizing: border-box;

		.sectPadTop {
			padding-top: 330rpx !important;
		}

		.sect-box {
			width: 100%;
			background-color: #fff;
			border-radius: 40rpx;
			padding: 24rpx;
			box-sizing: border-box;
			overflow-y: auto;

			.bills-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 2rpx solid rgba(241, 241, 241, 0.8);
				padding: 24rpx 0;
				box-sizing: border-box;

				.consume-time {
					font-family: 'DIN-Regular';
					color: #999;
				}

				.green {
					color: #32B499;
				}

				.red {
					color: #EA5F5F;
				}

			}

			.bills-item:last-child {
				border: 0;
			}
		}

		.bill-empty {
			width: 100%;
			min-height: 90vh;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 28rpx;
			color: #999999;
			background-color: #fff;
			border-radius: 40rpx;

			image {
				width: 620rpx;
				height: 308rpx;
				display: block;
				margin-bottom: 24rpx;
			}
		}

	}
</style>